/* Variables: Basic */
/* ========================================================================== */
:root {
  /* Color */
  --color-bg   : #fff;
  --color-text : #333;
  --theme-color: #0b85d7;

  /* Color: Monochromatic */
  --color-mono-min: var(--color-bg);
  --color-mono-1  : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 5%);
  --color-mono-2  : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 10%);
  --color-mono-3  : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 20%);
  --color-mono-4  : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 32%);
  --color-mono-5  : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 50%);
  --color-mono-6  : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 32%);
  --color-mono-7  : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 20%);
  --color-mono-8  : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 10%);
  --color-mono-9  : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 5%);
  --color-mono-max: var(--color-text);

  /* Color: Theme Shades (darker) & Tints (lighter)*/
  /* NOTE: Values derived from --theme-color */
  --theme-color-1: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 90%);
  --theme-color-2: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 75%);
  --theme-color-3: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 55%);
  --theme-color-4: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 30%);
  --theme-color-5: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 30%);
  --theme-color-6: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 55%);
  --theme-color-7: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 75%);
  --theme-color-8: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 90%);

  /* Typography */
  --font-family      : system-ui, sans-serif;
  --font-family-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-family-mono : ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font-size        : 16px; /* px */
  --font-size-xxxl   : calc(var(--font-size-xxl) * var(--modular-scale));
  --font-size-xxl    : calc(var(--font-size-xl) * var(--modular-scale));
  --font-size-xl     : calc(var(--font-size-l) * var(--modular-scale));
  --font-size-l      : calc(1rem * var(--modular-scale));
  --font-size-m      : var(--font-size);
  --font-size-s      : max(13px, calc(var(--font-size-m) / var(--modular-scale)));
  --font-size-xs     : max(11px, calc(var(--font-size-s) / var(--modular-scale)));
  --font-size-emoji  : 1.2em;
  --font-size-mono   : 0.875rem;
  --font-weight      : 350;
  --font-weight-mono : var(--font-weight);
  --line-height      : 1.6;
  --modular-scale    : 1.250; /* 1.067, 1.125, 1.200, 1.250, 1.333, 1.414, 1.500, 1.618 */

  /* Common */
  --border-color      : var(--color-mono-2);
  --border-radius     : 3px; /* Single value */
  --duration-slow     : 500ms;
  --duration-medium   : 250ms;
  --duration-fast     : 150ms;
  --margin-block      : 1rem; /* Single value */
  --scroll-padding-top: var(--margin-block);

  /* Content */
  --content-margin-inline: 45px; /* Single value */
  --content-max-width    : 72ch;

  /* Cover */
  --cover-bg           : unset;
  --cover-bg-brightness: 1;
  --cover-bg-overlay   : radial-gradient(transparent 60%, rgba(0, 0, 0, 0.1));
  --cover-color        : ;
  --cover-title-color  : var(--strong-color);
  --cover-title-font   : var(--font-size-xxxl) var(--font-family);

  /* Elements */
  --blockquote-bg                 : ;
  --blockquote-border-color       : var(--theme-color);
  --blockquote-border-radius      : 0;
  --blockquote-border-width       : 0 0 0 4px;
  --blockquote-color              : var(--color-mono-6);
  --blockquote-padding            : 0 0 0 1.5em;
  --button-bg                     : var(--theme-color);
  --button-border-radius          : 100vh;
  --button-color                  : #fff;
  --button-padding                : 0.3em 1.25em 0.315em 1.25em;
  --callout-bg                    : ;
  --callout-border-color          : ;
  --callout-border-radius         : 0 var(--border-radius) var(--border-radius) 0;
  --callout-border-width          : 0 0 0 4px;
  --callout-charm-bg              : ;
  --callout-charm-border-radius   : 100vh;
  --callout-charm-color           : ;
  --callout-charm-content         : ;
  --callout-charm-font-size       : 1.2em;
  --callout-charm-inset           : 50% auto auto -2px;
  --callout-charm-size            : 1.3em;
  --callout-charm-translate       : -50% -50%;
  --callout-color                 : ;
  --callout-padding               : 1em 1em 1em var(--callout-charm-size);
  --code-bg                       : var(--color-mono-1);
  --code-color                    : ;
  --codeblock-bg                  : var(--code-bg);
  --codeblock-color               : var(--code-color);
  --codeblock-comment             : #6e8090;
  --codeblock-function            : #dd4a68;
  --codeblock-important           : #c94922;
  --codeblock-keyword             : #07a;
  --codeblock-operator            : #a67f59;
  --codeblock-property            : #c08b30;
  --codeblock-punctuation         : #999;
  --codeblock-selector            : #690;
  --codeblock-tag                 : #905;
  --codeblock-variable            : #e90;
  --form-element-bg               : var(--color-mono-1);
  --form-element-border-color     : var(--color-mono-3);
  --form-element-border-radius    : var(--border-radius);
  --form-element-color            : ;
  --heading-color                 : var(--strong-color);
  --heading-font-weight           : 600;
  --heading-line-height           : calc(2ex + 5px); /* Unit required */
  --kbd-bg                        : var(--color-mono-1);
  --kbd-border                    : 1px solid var(--color-mono-3);
  --kbd-border-radius             : 4px;
  --kbd-color                     : var(--color-mono-5);
  --kbd-alt-bg                    : var(--color-mono-1);
  --kbd-alt-border                : none;
  --kbd-alt-border-radius         : var(--kbd-border-radius);
  --kbd-alt-box-shadow            : 0 2px 0 1px var(--color-mono-3);
  --kbd-alt-color                 : var(--kbd-color);
  --link-color                    : ;
  --link-color-hover              : var(--theme-color);
  --link-underline-color          : var(--theme-color);
  --link-underline-color-hover    : var(--link-underline-color);
  --link-underline-thickness      : 2px;
  --link-underline-thickness-hover: var(--link-underline-thickness);
  --mark-bg                       : #fef08a;
  --mark-color                    : ;
  --strong-color                  : color-mix(in srgb, var(--color-text), black 35%);
  --strong-font-weight            : 600;
  --table-row-alt-bg              : var(--color-mono-1);

  /* Navbar */
  --navbar-font-size        : var(--font-size);
  --navbar-height           : 4em;
  --navbar-link-color       : ;
  --navbar-link-color-active: var(--theme-color);
  --navbar-drop-link-spacing: 0.5em;

  /* Sidebar */
  --sidebar-bg                      : var(--color-bg);
  --sidebar-border-color            : var(--border-color);
  --sidebar-color                   : ;
  --sidebar-font-size               : var(--font-size);
  --sidebar-group-border            : ;
  --sidebar-group-spacing           : ;
  --sidebar-group-title-border      : ;
  --sidebar-group-title-color       : var(--strong-color);
  --sidebar-group-title-font-size   : ;
  --sidebar-group-title-font-weight : var(--strong-font-weight);
  --sidebar-group-title-spacing     : ;
  --sidebar-link-color              : var(--color-text);
  --sidebar-link-color-active       : var(--theme-color);
  --sidebar-link-spacing            : 0.75em;
  --sidebar-name-color              : var(--strong-color);
  --sidebar-name-font-family        : var(--font-family);
  --sidebar-name-font-size          : var(--font-size-xl);
  --sidebar-name-font-weight        : var(--strong-font-weight);
  --sidebar-name-margin             : 1.5rem 20px;
  --sidebar-pagelink-bg             : ;
  --sidebar-pagelink-bg-collapsed   : ;
  --sidebar-pagelink-bg-empty       : ;
  --sidebar-pagelink-bg-expanded    : ;
  --sidebar-toggle-alignment        : center; /* start center end */
  --sidebar-toggle-bg               : var(--color-mono-2);
  --sidebar-toggle-bg-hover         : var(--button-bg);
  --sidebar-toggle-color            : var(--color-mono-4);
  --sidebar-toggle-color-hover      : var(--button-color);
  --sidebar-toggle-height           : 80px;
  --sidebar-toggle-margin-block     : 20px;
  --sidebar-toggle-width            : 22px;
  --sidebar-width                   : 280px;
}

/* Scoped Variables */
/* ========================================================================== */
/* Callout: Important */
.callout.important {
  --callout-bg           : var(--color-mono-1);
  --callout-border-color : #f66;
  --callout-charm-bg     : var(--callout-border-color);
  --callout-charm-color  : #fff;
  --callout-charm-content: '!';
  --callout-color        : ;
}

/* Callout: Important */
.callout.tip {
  --callout-bg           : var(--theme-color-1);
  --callout-border-color : var(--theme-color);
  --callout-charm-bg     : var(--callout-border-color);
  --callout-charm-color  : #fff;
  --callout-charm-content: 'i';
  --callout-color        : ;
}